<template>
  <div class="container w-p100">
    <transition :name="routerAni">
      <router-view class="router-view of-y-s"></router-view>
    </transition>
    <div class="w-p100 of-x-s box box-ac">
      <!-- <div class="of-x-s box-f1 box">
        <div class="box">
          <div @click="actTabIndex = index" :class="{act: actTabIndex === index}" v-for="(item, index) in bizAccountBill.entrys" :value="item" :key="index" class="head-item box box-ac box-jc">
            第{{index + 1}}程
          </div>
        </div>
      </div> -->
      <div @click="changeTab(index)" :class="{act: actTabIndex === index}" v-for="(item, index) in bizAccountBill.entrys" :value="item" :key="index" class="head-item box box-ac box-jc">
        第{{index + 1}}程
      </div>
      <div @click="addXinCen()" class="icon icon-add-gray"></div>
    </div>
    <div class="list w-p100">
      <div v-if="actTabIndex === index" v-for="(item, index) in bizAccountBill.entrys" :value="item" :key="index" class="item">
        <div class="area box">
          <div @click="selectCity(index, 'from')" class="from">{{item.from}}</div>
          <div class="box center box-f1 box-ver box-ac box-jc tc-333">
            <div @click="switchArea(item)" class="icon icon-arrow-two"></div>
          </div>
          <div @click="selectCity(index, 'to')" class="to">{{item.to}}</div>
        </div>
        <div class="time box box-ac">
          <div @click="showPicker()" class="start box box-ac">
            <div class="date box-f1 tx-c" >{{formatDate(item.startTime)}}</div>
            <div class="icon icon-calendar"></div>
          </div>
          <div class="box-f1 tx-c">(共{{countDate(item.endTime, item.startTime) + 1}}天)</div>
          <div @click="showPicker()" class="start box box-ac">
            <div class="date box-f1 tx-c">{{formatDate(item.endTime)}}</div>
            <div class="icon icon-calendar"></div>
          </div>
        </div>
        <div class="person">
          <div class="box box-ac">
            <div class="icon icon-travel-person"></div>
            <div class="title box-f1">出差人</div>
            <div @click="selectPerson(index)" class="icon icon-add-blue"></div>
          </div>
          <div class="person-list box">
            <div v-for="(item1, index1) in item.travelPerson" :value="item1" :key="index1"  class="person-item box box-ac">
              <div class="box-f1 tx-c ell">{{item1.userName}}</div>
              <div  @click="deletePerson(index, index1)" class="person-delete box box-ac box-jc">
                <div class="icon icon-person-delete"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div @click="deleteEntry()" v-if="actTabIndex > 0" class="btn-delete">删除当前行程</div>
    <div @click="next()" class="btn-bot">第二步 填写出差类型/事由</div>
    <date-picker ref="datePicker"
      :restday="restday"
      :workday="workday"
      :display="show"
      :custom="data"
      :displayRange="[-1, 3]"
      :autoComplete="false"
      @select="select"
      @cancel="cancel"
      ></date-picker>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { countDate, initEvectionItem, getAddDate } from '@/assets/js/common'
import { getCitys } from '@/assets/js/api'
import datePicker from '@/components/datePicker'

export default {
  name: 'xinCenStep1',
  components: {
    datePicker
  },
  data () {
    return {
      actTabIndex: 0,
      // 选择器专属参数
      startDate: '',
      endDate: '',
      restday: [],
      workday: [],
      data: [],
      show: false
    }
  },
  computed: {
    ...mapState(['bizAccountBill', 'routerAni']),
    readonly () {
      let state = this.bizAccountBill.state || 20
      return (+state !== 20)
    }
  },
  mounted () {
    if (!this.bizAccountBill.entrys) return this.$router.replace('/')
    // 预先缓存出差城市
    this.changeTab(0)
    this.getCitys()
  },
  methods: {
    formatDate (date) {
      if (!date) return ''
      let arr = date.split('-')
      return `${+arr[1]}月${+arr[2]}日`
    },
    // 选择器方法
    select ({ start, end, range }) {
      console.log(start, end, range)
      // this.startDate = start.odate
      // this.endDate = end.odate
      // console.log('range', range)
      this.bizAccountBill.entrys[this.actTabIndex].startTime = start.odate
      this.bizAccountBill.entrys[this.actTabIndex].endTime = end.odate
      this.show = false
    },
    // 切换出发地目的地
    switchArea (item) {
      let from = item.from
      item.from = item.to
      item.to = from
    },
    cancel () {
      this.show = false
    },
    selectErr (date) {
      console.log('date', date)
      // alert(`无法选择该范围：${date.date}为${date.custom.dec}`)
    },
    showPicker () {
      let $datePicker = this.$refs.datePicker
      let entry = this.bizAccountBill.entrys[this.actTabIndex]
      let firstSelectDay = this.getPickerTar(entry.startTime)
      let lastSelectDay = this.getPickerTar(entry.endTime)
      firstSelectDay.begin = true
      lastSelectDay.end = true
      console.log(firstSelectDay, lastSelectDay)
      $datePicker.selectOne(firstSelectDay, true)
      $datePicker.selectOne(lastSelectDay, true)
      this.show = true
    },
    changeTab (index) {
      this.actTabIndex = index
    },
    getPickerTar (date) {
      let A = date.split('-')
      let year = +A[0]
      let month = +A[1]
      let day = +A[2]
      return {
        date: `${year}-${month}-${day}`,
        day: day,
        month: month,
        odate: date,
        rest: false,
        text: day,
        year: year
      }
    },
    countDate (d1, d2) {
      if (d1 && d2) {
        return Math.round(countDate(d1, d2))
      } else {
        return ' '
      }
    },
    addXinCen () {
      if (this.readonly) return
      let item = initEvectionItem()
      let entrys = this.bizAccountBill.entrys
      let len = entrys.length
      item.from = entrys[len - 1].to
      item.to = ''
      item.startTime = entrys[len - 1].endTime
      item.endTime = ''
      let isAllComplete = true
      this.bizAccountBill.entrys.forEach(item => {
        let { from, to, startTime, endTime, travelPerson } = item
        if (!from || !to || !startTime || !endTime || travelPerson.length === 0) {
          isAllComplete = false
        }
      })
      if (!isAllComplete) {
        this.$tools.openToast({
          msg: '请先完善现有行程信息',
          duration: 3000
        })
        return
      }
      this.bizAccountBill.entrys.push(item)
      this.actTabIndex = len
    },
    deletePerson (index, index1) {
      if (this.readonly) return
      console.log(this.bizAccountBill.entrys[index].travelPerson)
      this.bizAccountBill.entrys[index].travelPerson.splice(index1, 1)
      // this.$store.commit('')
    },
    deleteEntry () {
      this.bizAccountBill.entrys.splice(this.actTabIndex, 1)
      this.actTabIndex--
    },
    getCitys () {
      if (sessionStorage.getItem('getCitys')) return
      getCitys(list => {
        sessionStorage.setItem('getCitys', JSON.stringify(list))
      })
    },
    selectPerson (index) {
      if (this.readonly) return
      this.$router.push({
        path: '/xinCenStep1/xinCenStep1PersonSelect',
        query: {
          index
        }
      })
    },
    selectCity (index, type) {
      if (this.readonly) return
      this.$router.push({
        path: '/xinCenStep1/cityList',
        query: {
          index, type
        }
      })
    },
    next () {
      // let entrys = this.bizAccountBill.entrys
      // let len = entrys.length
      this.$store.commit('bizAccountBill', {
        entrys: this.bizAccountBill.entrys
      })
      this.$router.push({
        path: '/xinCenStep2'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.btn-bot{
  @include btn(100%, 1rem, .36rem);
  position: absolute;
  bottom:0;
  left:0;
}
.btn-delete{
  margin: .5rem auto;
  width:3.6rem;
  height:.8rem;
  border-radius:.8rem;
  background-color:#cde3fc;
  color:#333;
  font-size:.32rem;
  line-height: .8rem;
  text-align: center;
}
.icon-add-blue,.icon-add-gray{
 height:.4rem;
 width:.4rem;
 margin-left:.1rem;
 @include bg-image('../assets/images/icon-add-gray');
}
.icon-add-blue{
  @include bg-image('../assets/images/icon-add-blue');
}
.icon-travel-person{
  width:.45rem;
  height:.39rem;
  @include bg-image('../assets/images/icon-travel-person');
}
.head-item{
  width:1.86rem;
  height:.88rem;
  &.act{
    background-color:$themeColor;
    border-top-right-radius: .3rem;
    color:#FFF;
  }
}
.list{
  border-top:1px solid $themeColor;
  border-bottom:1px solid $themeColor;
}
.item{
  padding:0 .55rem;
  background-color:#FFF;
  .area{
    padding-top:.3rem;
    padding-bottom:.2rem;
    // border-bottom:1px solid #ddd;
    .from,.to{
      height:.7rem;
      line-height: .7rem;
      font-size:.36rem;
      text-align:center;
      width:2.5rem;
      border-bottom:1px solid #DDD;
    }
    .center{
      font-size:.22rem;
      line-height:.36rem;
    }
  }
  .time{
    padding-top:.1rem;
    padding-bottom:.2rem;
    .start{
      width:2.5rem;
    }
    .date{
      line-height: .66rem;
      height:.66rem;
      font-size:.36rem;
      border-bottom:1px solid #ddd;
    }
    .icon-calendar{
      width:.4rem;
      height:.4rem;
      @include bg-image('../assets/images/icon-calendar');
    }
  }
  .person{
    padding-top:.3rem;
    padding-bottom:.3rem;
    .title{
      padding-left:.1rem;
      font-size:.3rem;
    }
    .person-list{
      flex-wrap: wrap;
    }
    .person-item{
      margin-top:.2rem;
      width:1.4rem;
      height:.36rem;
      border:1px solid #999;
      border-radius:.1rem;
      font-size:.24rem;
      margin-right:.2rem;
      float: left;
    }
    .person-delete{
      width:.36rem;
      height:.36rem;
      background-color:#ddd;
    }
    .icon-person-delete{
      width:.24rem;
      height:.24rem;
      @include bg-image('../assets/images/icon-person-delete');
    }
  }
}
</style>
